<template>
	<view>
		<view class="list">
			<view class="list-item" v-for="item in arr">
				<view>{{item.name}}</view>
				<view><input type="text" :placeholder="item.txt"></view>
			</view>
		</view>
		<view style="margin-top: 20rpx; width: 90%; margin-left: 40rpx;">提醒：后续只能绑定该持卡人的银行卡</view>
		<view class="list">
			<view class="list-item" v-for="item in arr1">
				<view>{{item.name}}</view>
				<view><input type="text" :placeholder="item.txt"></view>
			</view>
		</view>
		<view style="margin: 20rpx 0rpx 40rpx 40rpx; width: 90%; display: flex;">
			<view>
				<radio-group @change="radioChange" class="radio-group-wrap">
								<!-- :checked= = true 默认为选中  -->
								 <!-- :checked="false" 默认为不选中 -->
								 <!-- 但是都不影响 点击之后 变为 打钩 -->
								<radio style="transform:scale(0.8);" value="agreementSelected" :checked="agreementChecked" @click="radioClick"></radio>
							</radio-group>
			</view>
			<view>同意</view>
			<view>《用户服务协议》</view>
		</view>
		<view>
			<button style="background-color: #f55d60;color: #FFFFFF; width: 400rpx; margin: 0 auto; opacity: 0.4; font-size: 30rpx;">验证信息</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				arr:[
					{name:'开户行',txt:'银行名称'},
					{name:'卡号',txt:'请输入银行卡号'},
				],
				arr1:[
					{name:'持卡人',txt:'身份证号'},
					{name:'身份证',txt:'姓名'},
					{name:'手机号',txt:'银行预留手机号'}
				],
				agreementChecked:false
			}
		},
		methods:{
			radioChange(e) {
					console.log(e.detail);
						//  错误写法：
						// this.agreementChecked != this.agreementChecked;
						//取反：
						// this.agreementChecked = false
						
					},
					radioClick(){
						console.log('~~~点击radio~~')
						
						this.agreementChecked = !this.agreementChecked;
					}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	.list{
		margin-top: 20rpx;
		width: 100%;
		background-color: #FFFFFF;
	}
	.list-item{
		display: flex;
		width: 90%;
		margin: 0 auto;
		font-size: 36rpx;
	}
	.list-item>view:nth-child(1){
		width: 150rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
	.list-item>view input{
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
